<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reserve.css">
    <script src="https://at.alicdn.com/t/font_2891532_1tfbb9l2y1y.js"></script>
</head>

<body>
    <div class="wrap">
        <div class="box">
            <button id="back">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fanhui2"></use>
                </svg>
            </button>
            <div class="date">
                <select name="" id="date">
     
                </select>
            </div>
            <div class="state">
                <table align="center">
                    <thead>
                        <tr>
                            <th>场次</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <p>★ 一个手机号，一天只能预约一场。</p>
        </div>
    </div>
    <script src="封装Promise Ajax.js"></script>



    <script>
        let b;
        let c;
        let d;

        let back = document.querySelector("#back");
        let date = document.getElementById("date");; //获取select元素
        let option; // 创建option标签
        let token = localStorage.getItem("token"); //获取token参数
        let arr; //获取日期数据
        let day_time; //获取具体时间
        let show_id; //获取show_id
        let id; //获取id






        (async() => {
            // 一、渲染下拉框
            b = await ajax("http://newshopapi.0melon0.cn/api/f_user/chooselist", { //获取预约时间列表接口
                "token": token
            });

            arr = b.result.list; //获取日期

            arr.forEach((item, index) => {
                // 创建option标签
                option = document.createElement("option");
                date.appendChild(option);

                for (let k in item) {
                    let newArr = item[k].split("-");
                    option.innerHTML = `${newArr[0]}年${newArr[1]}月${newArr[2]}日`; //给option添加日期文本
                    option.value = index; //给option添加value属性
                };
            });



            // 第一天的日期
            day_time = arr[0].day_time;
            // 第一天的日期文本放入localStorage
            localStorage.setItem("day_time", day_time);





            // 二、打开预约页面时，渲染表格
            (async() => {
                c = await ajax("http://newshopapi.0melon0.cn/api/f_user/chooseday", { //查询某天场次接口
                    "token": token,
                    "day_time": localStorage.getItem("day_time", day_time)
                });
                Fn();
            })();
        })();








        // 三、 点击下拉框的某个日期
        date.addEventListener("change", function() {
            //获取点击的日期
            day_time = arr[this.value].day_time;
            // 选中的日期文本放入localStorage
            localStorage.setItem("day_time", day_time);

            (async() => {
                c = await ajax("http://newshopapi.0melon0.cn/api/f_user/chooseday", { //查询某天场次接口
                    "token": token,
                    "day_time": localStorage.getItem("day_time", day_time)
                });
                Fn();
            })();
        });



        // 四、返回上一页
        back.addEventListener("click", () => {
            location.assign("./index.html");
        });





        // 封装函数
        function Fn() {
            // 五、渲染表格
            let arr = c.result.list; //获取时间段（数组）
            let tr = document.querySelectorAll("tbody>tr");

            tr.forEach((item, index) => {
                // 渲染时间段
                item.firstElementChild.innerHTML = arr[index].show_name;

                let firstTime = arr[index].show_name.split("-")[0]; //获取时间段里最早的时间
                let date_time = arr[index].day_time; //获取日期
                let string = date_time + " " + firstTime; //日期和时间拼接
                let time_diff = new Date(string).getTime() - new Date().getTime(); //获取要预约的时间和当前时间 的时间差



                // 渲染 可预约 和 已约满
                if (time_diff > 0) {
                    item.lastElementChild.innerHTML = "可预约";
                } else if (time_diff < 0) {
                    item.lastElementChild.innerHTML = "已约满";
                };







                // 六、点击 可预约 
                item.lastElementChild.addEventListener("click", function() {
                    show_id = arr[index].show_id;
                    // 获取show_id存入localStorage
                    localStorage.setItem("show_id", show_id);
                    // 小时时间存入localStorage
                    localStorage.setItem("time", this.previousElementSibling.innerText);
                    console.log(d);

                    if (this.innerText === "可预约") {
                        (async() => {
                            d = await ajax("http://newshopapi.0melon0.cn/api/f_user/bookday", {
                                "token": token,
                                "day_time": day_time,
                                "show_id": show_id
                            }, "POST");



                            // 获取id存入localStorage
                            localStorage.setItem("id", d.result.id);
                            // 获取name存入localStorage
                            localStorage.setItem("name", d.result.name);

                            console.log(d);

                            location.href = "./sucess.html"
                        })();
                    };
                });
            });
        };
    </script>
</body>

</html>